// import React, { Component,useEffect} from 'react'

// export default class App extends Component {

//   // getDetrivedStateFromProps
//   // shouldComponentDidUpdate
//   // render
//   // getSnapshotBeforeUpdate
//   // componentDidUpdate
//   state = {
//     num: 6
//   }
//   componentDidMount(){
//     document.title = this.state.num;
//     this.timerId = setInterval(()=>{
//       this.setState({
//         num : this.state.num + 1
//       })
//       console.log(this.state.num);
//     },1000)
//   }
//   componentDidUpdate(){
//     document.title = this.state.num;
//   }
//   componentWillUnmount(){
//     clearInterval(this.timerId);
//   }
//   render() {
//     return (
//       <div>
//         <h1>{this.state.num}</h1>
//       </div>
//     )
//   }
// }
import React, { useState, useEffect } from "react";
function App() {
  let [num, setNum] = useState(6);
  // useEffect => componentDidMount、componendDidUpdate componentWillUnmount
  // componentDidMount、componendDidupdate 没有添加第二个参数的情况下
  // useEffect(()=>{
  //   document.title = num;
  //   setInterval(()=>{
  //     setNum(c=>c+1);
  //   },1000)
  // })
  // 当useEffect 第二个参数是 [] 空数组的情况下，componentDidMount
  useEffect(() => {
    document.title = num;
    let timerId = setInterval(() => {
      setNum((c) => c + 1);
    }, 1000);
    return function cleanup() {
      console.log("清除定时器");
      clearInterval(timerId);
    };
  }, []);
  useEffect(() => {
    document.title = num;
  }, [num]);

  // document.title = num;
  // setInterval(() => {
  //   setNum(num + 1);
  //   console.log(num+1);
  //   document.title = num;
  // }, 1000);
  return <div>{num}</div>;
}

function Demo(){
  let [bool,setBool] = useState(true);
  return <div>
    {
      bool? <App></App>:""
    }
    <button onClick={()=>{
      setBool(false)
    }}>销毁组件</button>
   
  </div>
}
export default Demo;
